"use client";

import { cn } from "@/lib/utils";
import { FileText, Settings, UserCircle } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";

export default function Left() {
  const path = usePathname();

  const items = [
    {
      label: "我的信息",
      icon: () => <UserCircle />,
      href: "/me",
      active: true,
    },
    {
      label: "我的文章",
      icon: () => <FileText />,
      href: "/me/posts",
      active: false,
    },
    {
      label: "设置",
      icon: () => <Settings />,
      href: "/me/settings",
      active: false,
    },
  ];

  for (const item of items) {
    item.active = item.href === path;
  }

  return (
    <ul>
      {items.map((it) => (
        <li key={it.href} className={cn("p-4 hover:bg-zinc-200", it.active && "bg-zinc-100")}>
          <Link className="block width-full flex" href={it.href}>
            {it.icon()}&nbsp;{it.label}
          </Link>
        </li>
      ))}
    </ul>
  );
}
